<!--
 * @Description: 01_jsx语法规则
 * @notes: 
 * @Author: 台火山
 * @Date: 2024-04-21 17:10:22
 * @LastEditors: 台火山
 * @LastEditTime: 2024-04-21 17:44:03
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_jsx语法规则</title>
    <style>
        .title {
            width: 200px;
            height: 100%;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- 准备号一个“容器” -->
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom,用于支持react操作 dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入 babel，用于将 jsx 转化为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        const myId = 'DeMo';
        const myData = 'hElLo,ReAcT';
        // 1.创建
        const VDOM = (
            <div>
                <h2 className="title" id="{myId.toLowerCase()}">
                    <span style={{ color: 'orange', fontSize: "20px" }}>{myData.toLowerCase()}</span>
                </h2>
                <input type="text" />
                <good></good>
            </div>
        )
        // 2.渲染
        ReactDOM.render(VDOM, document.getElementById('test'));
        /*
            jsx语法规则
                1.定义虚拟DOM时,不要写引号
                2.标签混入 JS 表达式时要用'{}'
                3.样式的类名指定不要用'class',要用'className'
                4.内联样式，要用style={{key：value}}的形式去写
                5.不能有多个根标签
                6.标签必须闭合
                7.标签首字母
                    (1).若小写字母开头，则将该标签转为 html 中同名元素，若 html 无该标签对应的同名元素，则报错
                    (2).若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错
        */
    </script>
</body>

</html>